<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交易统计</title>
    <link rel="stylesheet" href="/css/supplies/bootstrap.min.css">
    <link rel="stylesheet" href="/js/supplies/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/supplies/common.css"/>
    <link rel="stylesheet" href="/icon/css/font-awesome.min.css">
    <style>
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
            vertical-align: middle;
        }
        body{
            padding:0px 20px 20px 20px;
        }
        .nav>li>a {
            position: relative;
            display: block;
        }
        #myTabContent {
         height: 700px;
        }
        #myTab li {
            width: auto;
        }
        #myTab{
            margin-bottom: 10px;
            -moz-box-shadow:0px 0px 22px #ddd; -webkit-box-shadow:0px 0px 22px #ddd; box-shadow:0px 0px 22px #ddd;
        }
        #myTab li a {
            width: auto;
        }
        .top{
            margin-top: 20px;
        }
        .center{
            padding-top: 60px;
            margin: 0 auto;
            width: 350px;
            height: 500px;
            margin-bottom: 40px;
        }

        table {
            text-align: center;
            border: 0;

        }

        .table > thead > tr > th {
            vertical-align: bottom;
            border-bottom: 1px solid #F2F2F2;
            text-align: center;
            background-color: white;
        }
        .table-box .table>tbody>tr>td{
            border-top: 1px solid #F2F2F2;
        }
        .tu{
            -moz-box-shadow:0px 0px 22px #eee; -webkit-box-shadow:0px 0px 22px #eee; box-shadow:0px 0px 22px #eee;
        }
        .table-box{
            margin-top: 20px;
            padding: 0 20px;
            -moz-box-shadow:0px 0px 20px #e5e5e5; -webkit-box-shadow:0px 0px 20px #e5e5e5; box-shadow:0px 0px 20px #e5e5e5;
        }
        .td-center{
            height: 45px;line-height: 40px ;
        }
        .font_en_bg{
            color: #666666;
        }
        a:hover{
            background:#fff !important
        }
        .page-style{
            float: left;
            margin-right: 10px;
            text-align: center;
            border:1px solid #FA6F10;
            width: 80px;
        }
        .pagearea{
            border: 0px;
        }
    </style>
</head>
<body>

    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#scale" data-toggle="tab">
                <div class="font_size_14">买家人数</div>
                <div class=" font_size_14 en_title">number of buyers</div>
                <div class="title-bottom-border"></div>
            </a>

        </li>
        <li><a href="#list" data-toggle="tab">
            <div class="font_size_14">商品销量</div>
            <div class="font_size_14 en_title">product sales</div>
            <div class="title-bottom-border"></div>
        </a>
        </li>
    </ul>


    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="scale" v-loading="loading">
            <div>
                <span class="font_size_14">最近一周买家人数统计</span> <br>
                <span class="font_en_bg font_size_14">last week's total number of buyers</span>
            </div>
            <div class="top tu" >
               <div class="center"><div id="data-scale"></div></div>
            </div>
        </div>
        <div class="tab-pane fade" id="list" v-loading="loading">
            <div>
                <span class="font_size_14">最近一周商品销量统计</span></br>
                <span class="font_en_bg font_size_14">last week's total sales</span>
            </div>

            <div class="table-box">
                <table class="table table-hover table-responsive">
                    <thead style="color: #666666">
                    <tr>
                        <th>
                            <span class="font_size_14">商品ID</span> <br>
                            <span class="font_size_14">product ID</span>
                        </th>
                        <th>
                            <span class="font_size_14">商品名</span> <br>
                            <span class="font_size_14">product name</span>
                        </th>
                        <th>
                            <span class="font_size_14">销量</span> <br>
                            <span class="font_size_14">sales volumn</span>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr data-index="0" v-for="(vo,index) in list">
                        <td> <span class="td-center font_size_16" v-text="vo.id"></span></td>
                        <td style="text-align: center">
                            <span class="font_size_14" v-text="vo.name"></span>
                        </td>
                        <td> <span class="td-center font_size_16" >{{vo.sale_num*vo.num}}{{vo.unit}}</span></td>
                    </tr>

                    </tbody>
                </table>
                <div class="pagearea" id="isShowPage">
                    <img src="/image/supplies/page_lower.png"  @click="perv()">
                    <img src="/image/supplies/page_upper.png" style="margin-right: 10px" @click="next()">
                    <div class="page-total margin-right ">共 {{total}} 条记录 <br>
                        <div class="color-9">total {{total}} records</div>
                    </div>
                </div>

            </div>
        </div>
    </div>


</body>
<script src="/js/supplies/jquery.min.js"></script>
<!--<script rel="script" src="/js/supplies/vue.min.js"></script>-->
<script src="/js/supplies/bootstrap.min.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/supplies/transaction/highcharts.js"></script>
<script src="/js/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/supplies/common.js"></script>
<script>
    var id;
    var seris = [];
    $(function () {
        id = {$id};
        sales.supplier_id = id;
        getStatistical();
        init() ;
        sales.salesInit();
        $('#myTab a').click(function (e) {
            e.preventDefault()
            $(this).tab('show');
            var title = $(this).html();
            if(title.indexOf("买家人数") >= 0){
                var title  = [];
                title[0] = {navTitle:"交易统计",e_navTitle:"transaction statistics",titleImg:1};
                title[1] = {navTitle:"买家人数",e_navTitle:"number of buyers",titleImg:0};
                window.parent.editTitle(title);
            }else if(title.indexOf("商品销量") >= 0){
                var title  = [];
                title[0] = {navTitle:"交易统计",e_navTitle:"transaction statistics",titleImg:1};
                title[1] = {navTitle:"商品销量",e_navTitle:"product sales",titleImg:0};
                window.parent.editTitle(title);
            }
        })
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });
    });
    
    var sales = new Vue({
        el:"#myTabContent",
        data:{
            list:[],
            page:1,
            current_page:1,
            last_page:1,
            total:0,
            supplier_id:0,
            loading: true
        },
        methods:{
            salesInit : function(){
                this.loading = true;
                $.ajax({
                    url:"{:url('supplies/shopweb/productSalse')}",
                    type:'post',
                    data:{
                        supplier_id:sales.supplier_id,
                        page:sales.page
                    },
                    success:function(ret){
                        if(200 == ret.status){
                            sales.list = ret.data;
                            sales.current_page = ret.data.current_page;
                            sales.last_page = ret.data.last_page;
                            sales.total = ret.data.total;
                            if(7 < sales.total ){
                                $("#isShowPage ").css("display","block");
                            }else{
                                $("#isShowPage ").css("display","none");
                            }
                            sales.total = false;
                        }else{
                            layer.msg(ret.msg,{
                                skin:'winning-class',//自定义样式winning-class
                                time:3000
                            });
                        }
                    }
                });
            },
            first:function(){
                if(1 == this.page){
                    return ;
                }else{
                    this.page = 1;
                }
                sales.salesInit();
            },
            perv:function(){
                if(1 == this.page){
                    return ;
                }else{
                    this.page --;
                }
                sales.salesInit();
            },
            next:function(){
                if(this.page == this.last_page){
                    return ;
                }else{
                    this.page ++;
                }
                sales.salesInit();
            }
        }
    });

    /*
     * @description :初始化
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/18 17:33
     */
    function init() {
        $(function(){
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                // 获取已激活的标签页的名称
                var activeTab = $(e.target).text();
                //console.log(activeTab);
                if(activeTab.indexOf("买家人数")!=-1){
                    getStatistical();//获取 下单人数比 的统计图
                }else{
                    //  getSalesCount() ;

                }

            });
        });
    }

    function getSalesCount() {
        alert(1);
        $.ajax({
            
        });
        $('#table').bootstrapTableEx({
            height: $(window).height() - 54,
            queryParams: function (params) {
                return params;
            },
            columns: [ {
                field: 'id',
                title: '商品ID<br>product ID',
                width: '25%'
            }, {
                field: 'productName',
                title: '商品名<br>product name',
                width: '50%',
                formatter: function (value, row, index) {
                    var html = '<div class="text-center">' +
                                '<div >'+row.productName+'<br> '+row.productNameEn+'</div>' +
                                 '</div>';
                    return html;
                }
            }, {
                field: 'sales',
                title: '销量<br>sales volumn',
                width: '25%'
            }
            ],
            data: [{
                "id": 1218954466,
                "productName": "牛肉",
                "productNameEn": "niurou",
                "sales": "50kg"
            }, {
                id: 34235,
                "productName": "猪肉",
                "productNameEn": "zhurou",
                "sales": "30kg"
            }]
        });
    }


    /*
     * @description : 获取浏览 下单人数比
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/17 9:38
     */
    function getStatistical() {
        sales.loading = true;
        $.ajax({
            url:"{:url('supplies/shopweb/getStatistical')}",
            type:'post',
            data:{
                supplier_id:id
            },
            success:function(ret){
                seris = ret.data;
            $('#data-scale').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: ''
                },credits: {
                    enabled: false
                },
                colors:[
                    '#FFDDC7'
                ],
                tooltip: {
                    headerFormat: '{series.name}<br>',
                    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'

                },
                legend: {
                    layout: 'vertical',
                    symbolRadius:0,
                    symbolWidth:10,
                    symbolHeight:10,
                    itemDistance:10,
                    itemMarginTop:30,
                    symbolPadding:10,
                    itemStyle:{
                        'font-size':'14px' ,
                        'font-weight': 'normal'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: '预览下单比',
                    data: [
                        ['浏览人数', seris.browse_num],
                        ['下单人数', seris.scan]
                    ]
                }]

            }, function (chart) {
                SetEveryOnePointColor(chart);
            });
                sales.loading = false;
            }
        });
    }

    //设置每一个数据点的颜色值
    function SetEveryOnePointColor(chart) {
        //定义一个全局颜色数组
        var colorArr = [ '#FE5004','#FF9B02'];
        //获得第一个序列的所有数据点
        var pointsList = chart.series[0].points;
        //遍历设置每一个数据点颜色
        for (var i = 1; i < pointsList.length; i++) {
            chart.series[0].points[i].update({
                color: {
                    linearGradient: {x1: 1, y1: 0, x2: -1, y2: 0}, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
                    stops: [
                        [0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
                        [1, 'rgb(255, 255, 255)']
                    ]
                }
            });
        }
    }
</script>
</html>